<!DOCTYPE html>
<html lang="en">

<head>

    <title>Video.js | HTML5 Video Player</title>
    <link href="js/video-js.css" rel="stylesheet">
    <script src="js/jquery.min.js"></script>
    <script src="js/ie8/videojs-ie8.min.js"></script>
    <script src="js/video.js"></script>
    <script src="js/videojs-contrib-hls.js"></script>
    <style>
        html, body {
            margin: 0px;
            padding: 0px
        }
    </style>
</head>

<body style="text-align:center">

<video id="video1" class="video-js vjs-default-skin" controls preload="auto" autoplay data-setup="{}">
</video>
<script>

    $(function () {

        // console.log('window.top',window.top.frames["frameVideo"]);
        console.log(GetQueryString("width"), GetQueryString("height"));
        var width = GetQueryString("width");
        var height = GetQueryString("height");
        $("#video1").attr("width", width);
        $("#video1").attr("height", height);

        var player = videojs('video1');

//        player.on(['loadstart', 'play', 'playing', 'firstplay', 'pause', 'ended', 'adplay', 'adplaying', 'adfirstplay', 'adpause', 'adended', 'contentplay', 'contentplaying', 'contentfirstplay', 'contentpause', 'contentended', 'contentupdate','retryplaylist'], function(e) {
//            console.warn('VIDEOJS player event: ',  e.type);
//
//        });
//        player.on("waiting", function(){
//            console.log("waiting", this.currentTime());
//        });
        var preprogress = 0;
        player.on("playing", function () {
            console.log("playing", this.currentTime());
            preprogress = 0;
        });


        player.on("progress", function () {
            if (preprogress!=0 && preprogress == this.currentTime()) {
                console.log('卡主了...');

                // 倒计时10秒，并通知服务端

            }
            preprogress = this.currentTime();
            // console.log("progress", this.currentTime());
        });
//        player.on("seeked", function(){
//            console.log("seeked", this.currentTime());
//        });
//        player.on("seeking", function(){
//            console.log("seeking", this.currentTime());
//        });


        player.src({
            src: 'http://ivi.bupt.edu.cn/hls/cctv6hd.m3u8',
            type: 'application/x-mpegURL',
            withCredentials: false
        });
    });

    function GetQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;

    }
</script>
</body>

</html>
